<template>

  <a-tooltip>
    <a-dropdown>
      <a class="portalDesigne ant-dropdown-link" style="padding: 0 10px;">
        {{$t('m.system.permission.other.menu_workbench')}}
        <a-icon type="down"/>
      </a>
      <a-menu slot="overlay" class="setUl" style="left:-10px;top:12px; width:200px">
        <a-menu-item
          :key="item.portletCode"
          v-for="(item) in portalConfigs"
          :style="{'background-color': defaultPortal === item.portletCode ? '#f0f5ff' : '' }"
          style="position: relative;">
          <a-icon
            v-if="defaultPortal === item.portletCode"
            style="left: 10px;"
            type="check"
            :style="{'color': defaultPortal === item.portletCode ? '#2f54eb' : '#999999' }"/>
          <a class="homeTit" target="_blank" @click="toIndex(item)">{{ item.portletName }}</a>
          <!--          <a-icon style="right: 8px;" type="delete" target="_blank" @click="toDesignIndex(item,'delete')"/>-->
          <a-icon style="right: 8px;" type="edit" target="_blank" @click="toDesignIndex(item)"/>
        </a-menu-item>
        <!--        <a-menu-divider/>
                <a-menu-item class="menu-operation" key="3" v-if="portalConfigs.length <= 15">
                  <a target="_blank" @click="toDesignIndex()">
                    <a-icon type="plus"/>
                    添加首页</a> 
                </a-menu-item>-->
      </a-menu>
    </a-dropdown>

    <!-- 门户配置设计弹窗 -->
    <AsyncComponent
      v-if="showEditIndexModal"
      ref="portalDesignRef"
      :path="portalDesignPath"
      :widgetForm="selectWidgetForm"
      :portLet="selectPortLet"
      :updateSelfPortletUrl="url.updateSelfPortletUrl"
      @closeModal="handeleCloseDesignMd"
      @updatePortLetList="updatePortLetList"
    />
  </a-tooltip>

</template>

<script>

import AsyncComponent from '@/framework/FormMaking/components/AsyncComponent/index';
import {httpAction, getAction} from '@/api/manage'
import YchConstant from "@/api/YchConstant";

export default {
  name: "UserPortalDesigne",
  components: {
    AsyncComponent,
  },
  data() {
    return {
      portalConfigs: [],
      defaultPortal: {},
      portalDesignPath: 'framework/FormMaking/components/portletDesign/PortalDesignModal',
      url: {
        setCurrentPortlet: YchConstant.PREFIX_SYSTEM + "/portlet/setCurrentPortlet",
        queryPortletBySelf: YchConstant.PREFIX_SYSTEM + "/portlet/queryPortletBySelf",
        updateSelfPortletUrl: YchConstant.PREFIX_SYSTEM + "/portlet/updateSelfPortlet",
      },
      showEditIndexModal: false,
      selectWidgetForm: {},
      selectPortLet: {},
    }
  },
  mounted() {
    this.queryPortletBySelf()
  },
  methods: {
    queryPortletBySelf() {
      getAction(this.url.queryPortletBySelf, null).then(res => {
        if (res.success) {
          if (res.result.currentPortletConfig && res.result.currentPortletConfig.portletCode) {
            this.defaultPortal = res.result.currentPortletConfig.portletCode
          }
          this.portalConfigs = res.result.portletConfigList
        }
      })
    },
    toDesignIndex(item) {
      this.selectWidgetForm = JSON.parse(item.content);
      this.selectPortLet = item;
      this.showEditIndexModal = true
    },
    toIndex(item) {
      const param = {
        "portletCode": item.portletCode
      }
      httpAction(this.url.setCurrentPortlet, param, 'post').then(res => {
        if (res.success) {
          this.$router.push('/index/portal').catch(err => {})
          this.$emit("reloadPortlet")
          this.queryPortletBySelf()
        }
      }).catch(() => {
      });
    },
    handeleCloseDesignMd() {
      this.showEditIndexModal = false
    },
    updatePortLetList() {
      this.$router.push('/index/portal').catch(err => {})
      this.$emit("reloadPortlet")
      this.queryPortletBySelf()
    },
  }
}
</script>
<style lang="less" scoped="scoped">

.setUl {
  .ant-dropdown-menu-item {
    padding: 5px 32px;
    font-size: 12px;
  }

  .ant-dropdown-menu-item > .anticon:first-child {
    font-size: 12px;
  }

  .ant-dropdown-menu-item i {
    position: absolute;
    top: 10px;
    font-size: 12px;
    color: #969696;
  }

  .ant-dropdown-menu-item > a.homeTit {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
  }

  .menu-operation {
    text-align: center;

    i {
      position: relative;
      top: 0px;
      margin-right: 5px;
    }
  }

  .menu-operation:hover {
    i {
      color: #1890ff
    }
  }
}
</style>
